<template>
    <div class="investmentSelection">
        <div class="header">
            <van-nav-bar :title="title" left-arrow @click-left="handleLeft">
                <template #right>
                    <van-image :src="saoyisao" class="menu_cion" @click="saomaClick" />
                </template>
            </van-nav-bar>
        </div>
        <div class="product_list_serch-text">
            <van-search class="product_list_serch1" v-model="queryParams.content" shape="round" background="#F6FAFF"
                placeholder="请输入商品名称/商品码或69码" />
            <div class="product_list_serch2">
                <div>
                    <van-button class="product_list-btn" round @click="onRefresh">搜索</van-button>
                </div>
                <div class="product_list-btn-screen" @click="handleListFlag">
                    <div class="product_list-btn-screen-image"></div>
                    <div class="product_list-btn-screen-text">筛选</div>
                </div>
            </div>
        </div>
        <div class="mongolian_layer" v-show="showTop" @click="">
            <div class="mongolian_layer_options">
                <div class="mongolian_layer_options_box">
                    <div class="title">招商部</div>
                    <div class="shelf_type anthor_type">
                        <div @click="shelfClick(index, item.deptId)" v-for="(item, index) in shelfList" :key="index"
                            :class="shelfIndex !== index ? 'shelf_div' : 'shelf_div_avtive'">
                            {{ item.deptName }}
                        </div>
                    </div>
                    <div class="title">招商员</div>
                    <div class="shelf_type anthor_type anthor_types">
                        <div v-for="(item, index) in recruiterList" :key="index" class="anthor_type_div">
                            <div @click="recruiterClick(index)"
                                :class="recruiterIndex !== index ? 'shelf_div' : 'shelf_div_avtive'">
                                {{ item.nickName }}
                            </div>
                        </div>
                    </div>
                    <div class="title">是否破价</div>
                    <div class="shelf_type anthor_type anthor_types">
                        <div v-for="(item, index) in breakingPrice" :key="index" class="anthor_type_div">
                            <div @click="breakingPriceClick(index)"
                                :class="breakingPriceIndex !== index ? 'shelf_div' : 'shelf_div_avtive'">
                                {{ item }}
                            </div>
                        </div>
                    </div>
                    <div class="title">上架时间</div>
                    <div class="date_shelf">
                        <div v-for="(item, index) in dataList" :key="index" class="date_shelf_div" @click="datePicker">
                            <van-image :src="complement" class="menu_cions" />
                            <div class="title">{{ computPlace(item, index) }}</div>
                        </div>
                        <div class="div">至</div>
                    </div>
                    <van-calendar v-model:show="pickerShow" type="range" @confirm="onConfirm" :allow-same-day="true"
                        :min-date="minDate" :max-date="maxDate" ref="calendarRef" />
                </div>
                <div class="buttons">
                    <div class="reset" @click="reset">重置</div>
                    <div class="submit" @click="submit">完成</div>
                </div>
            </div>
        </div>
        <div class="screen">
            <div class="screen_div" @click="screenClicks()">
                <div class="screen_child">{{ catName }}</div>
                <van-image :src="heisexiasanjiao" class="screen_icons" />
            </div>
            <div class="screen_div" v-for="(item, index) in screenList" :key="index" @click="screenClick(index)">
                <div class="screen_child">{{ item.title }}</div>
                <div class="screen_icon">
                    <img :src="computScreen(index)" alt="" class="screen_icons">
                    <img :src="computScreens(index)" alt="" class="screen_icons">
                </div>
            </div>
        </div>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list v-model:loading="loading" :finished="finished" @load="onLoad">
                <template v-slot:finished>
                    <div class="nothing_div" v-if="warehouseList.length == 0 && !refreshing">
                        <van-image :src="nothingData"></van-image>
                        <div class="nothing_font">暂无数据</div>
                    </div>
                </template>
                <van-swipe-cell v-for="(item) in warehouseList" :key="item.id">
                    <commodityList :data="item" @click="routerGo(item.id, item.shoppingStatus)" @addcart="addcart" />
                </van-swipe-cell>
            </van-list>
        </van-pull-refresh>
        <transition appear @before-appear="beforeEnter" @after-appear="afterEnter" @after-leave="handleAnimationEnd"
            v-for="(item, index) in showBall" :key="index">
            <div :style="ballStyle" class="ball" v-if="item">
                <van-image :src="icon_jiagou"></van-image>
            </div>
        </transition>

        <div :class="{ 'cart': true, 'playAnimation': playStart }" ref="cartMessage" @click="cartClick">
            <van-image :src="icon_gouwuche" />
            <div class="numbers">{{ cartNumber }}</div>
        </div>
        <category :isShow="isShow" @leftClick="leftClick" @onSubmit="onSubmit" v-model:value="queryParams.categoryId" />
    </div>

</template>
<script setup lang="ts">
import { getUserList, queryList } from '@/api/productHome/index'
import category from '@/components/category/index.vue'
import { computed, onMounted, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { type CalendarInstance, showToast } from 'vant';
import { getSelectionList, getFloor, addShoppingCart } from '@/api/operation/index'
import { getEnvValue } from "@/utils/index";
// 列表
import commodityList from './components/investComponent.vue'
import heiseshangsanjiao from '@/assets/productHome/icon_heiseshangsanjiao.png'
import huiseshangsanjiao from '@/assets/productHome/icon_huiseshangsanjiao.png'
const complement = new URL("@/assets/productHome/icon_riqi.png", import.meta.url).href;
const icon_jiagou = new URL("@/assets/operation/icon_jiagou.png", import.meta.url).href
const huisexiasanjiao = new URL("@/assets/productHome/icon_huisexiasanjiao.png", import.meta.url).href;
const heisexiasanjiao = new URL("@/assets/productHome/icon_heisexiasanjiao.png", import.meta.url).href;
const saoyisao = new URL("@/assets/productHome/icon_saoyisao1.png", import.meta.url).href;
const nothingData = new URL("@/assets/porduct/icon_zanwushuju.png", import.meta.url).href;
const icon_gouwuche = new URL("@/assets/operation/icon_gouwuche.png", import.meta.url).href;
const router = useRouter();
const route = useRoute();
/** 楼层id */
const shelvesCode = ref<Array<string>>([]);
/** 商品详情中返回得新增购物车 */
const shoppingStatus = computed(() => {
    return route.query.shoppingStatus;
});
/** 商品详情中 新增购物车后得产品id */
const productId = computed(() => {
    return route.query.productId;
});
/** 购物车中返回商品列表页 购物车数据 */
const cartData = computed(() => {
    return route.query.cartData as any;
});


// 标题
const title = ref();
// 商品list
const warehouseList = ref<any>([])
// 筛选集合
const screenList = ref([
    { title: '上架时间' },
])
// rice上升 dic下降
const queryParams = ref<any>({
    pageNum: 1,
    pageSize: 10,
    categoryId: '',
    content: undefined,
    groundStartTime: '',
    groundEndTime: '',
    discountPrice: '',
    recruiterId: '',
    groundTimeSort: '2',
});
// 详情中新增购物车
watch(
    () => shoppingStatus.value,
    (v: any) => {
        if (v) {
            if (warehouseList.value.length) {
                warehouseList.value.forEach(element => {
                    if (element.id == productId.value) {
                        element.shoppingStatus = 1
                        GetFloor()
                    }
                })
            }
        }
    },
    { immediate: true }
)
/**
 * 
 * 购物车中返回商品列表页
 *  处理当前页面缓存 从购物车返回后页面不刷新 购物车有更新 但是列表不更新问题
 * */
watch(
    () => cartData.value,
    (v: any) => {
        if (v) {
            const parsedData = JSON.parse(v);
            const parsedDataMap = new Map(parsedData.map(item => [item.id, item]));
            if (warehouseList.value.length) {
                warehouseList.value.forEach(element => {
                    // 使用 Map 进行快速查找  
                    if (parsedDataMap.has(element.id)) {
                        element.shoppingStatus = 1;
                    } else {
                        element.shoppingStatus = 0;
                    }
                });
                GetFloor()
            }
        }
    }
)

const elLeft = ref(0) //记录当前点击加入购物车的小商品距离网页左边的距离
const elTop = ref(0)//记录当前点击加入购物车的小商品距离网页顶部的距离
const showBall = ref<any>([])// 控制页面开始得动画问题
const cartMessage = ref() //购物车ref
const playStart = ref(false) //控制购物车的弹簧动画效果
// 加入购物车
const addcart = async (elLefts: any, elTops: any, data: any) => {
    showBall.value.push('true')
    elLeft.value = elLefts
    elTop.value = elTops

    await addShoppingCart({ id: data.id, floor: title.value.includes('一') ? 1 : title.value.includes('二') ? 2 : title.value.includes('三') ? 3 : title.value.includes('四') ? 4 : title.value.includes('五') ? 5 : title.value.includes('六') ? 6 : title.value.includes('七') ? 7 : title.value.includes('八') ? 8 : title.value.includes('九') ? 9 : title.value.includes('十') ? 10 : title.value.includes('十一') ? 11 : title.value.includes('十二') ? 12 : title.value.includes('十三') ? 13 : 0 })
    // 选中状态
    data.shoppingStatus = 1

}
// 小球位置
const ballStyle = ref({
    left: elLeft.value,
    top: elTop.value
})
// 移动前操作
const beforeEnter = (el) => {
    el.style.transform = `translate3d(${(elLeft.value + 50) / 375 * 100}vw,${(elTop.value + 50) / 375 * 100}vw,0)`
}
// 移动操作
const afterEnter = (el) => {
    const rect = cartMessage.value.getBoundingClientRect()
    //购物车到网页左边和顶部的距离
    const { left, top } = rect
    //设置小球移动的位移目标点
    el.style.transform = `translate3d(${(left + 20) / 375 * 100}vw,${(top + 20) / 375 * 100}vw,0)`
    //增加贝塞尔曲线，让移动路径为曲线
    el.style.transition = 'transform .55s cubic-bezier(0.3,-0.25,0.7,-0.15)'
    el.style.transition = 'transform .55s linear'
    // 控制小球动画结束后消失
    showBall.value = showBall.value.map(() => false)
}
// 动画结束
const handleAnimationEnd = () => {
    playStart.value = true
    setTimeout(() => {
        playStart.value = false
    }, 500) //500ms移除购物车的弹簧动画效果
    //调用将商品加入购物车的方法，动画结束后才将商品数据添加到购物车
    GetFloor()
}
// 购物车数量
const cartNumber = ref(0)
// 列表
const refreshing = ref(false);
const loading = ref(false);
const finished = ref(false);
// 限制连续刷新数据重复问题
const refreFlag = ref(true)

const catName = ref('商品类目')
const isShow = ref<any>(false)
/** 商品类目 */
const screenClicks = () => {
    isShow.value = true
}
// 类目导航返回
const leftClick = () => {
    isShow.value = false
}
// 搜索查询
const onSubmit = (arr: any, tier: number) => {
    catName.value = arr[tier - 1].categoryName == '全部' ? '商品类目' : arr[tier - 1].categoryName
    isShow.value = false
    onRefresh()
}
/** 跳转详情 */
const routerGo = (id: string, shoppingStatus: number) => {
    router.push({
        path: `/operationBasicsDetail/${id}`,
        query: {
            type: 'investmentSelection',
            // 货架id
            shelvesCode: shelvesCode.value.join(','),
            shoppingStatus,
            title: title.value
        }
    })
}

// 筛选
const showTop = ref(false)

// 招商部 index
const shelfIndex = ref<any>()
// 招商部
const shelfList = ref<any>([])
// 招商员
const recruiterList = ref<any>([])
// 招商员 index
const recruiterIndex = ref()
// 是否破价
const breakingPrice = ref([
    '可破价', '不可破价'
])
// 是否破价 index
const breakingPriceIndex = ref()
const dataList = ref([
    '起始时间', '结束时间'
])
// 日期展示
const pickerShow = ref(false)
// 开始时间
const startTime = ref()
// 结束时间
const endTime = ref()
// 自定义日期范围
const minDate = new Date('2010/01/01')
const maxDate = new Date('2050/12/31')
// 日期ref
const calendarRef = ref<CalendarInstance>();
/** 筛选 */
const handleListFlag = () => {
    showTop.value = !showTop.value
}
/** 招商部点击 */
const shelfClick = async (index: number, deptId: string) => {
    if (shelfIndex.value == index) {
        shelfIndex.value = undefined
        recruiterList.value = []
        recruiterIndex.value = undefined
    } else {
        shelfIndex.value = index
        const res = await getUserList({ deptId: deptId })
        recruiterList.value = res.rows
        recruiterIndex.value = undefined
    }
}
/** 招商员点击 */
const recruiterClick = (index: number) => {
    if (recruiterIndex.value == index) {
        recruiterIndex.value = undefined
    } else {
        recruiterIndex.value = index
    }
}
/** 是否破价点击 */
const breakingPriceClick = (index: number) => {
    if (breakingPriceIndex.value == index) {
        breakingPriceIndex.value = undefined
    } else {
        breakingPriceIndex.value = index
    }
}
/** 获取招商部门 */
const getanchor = async (id) => {
    const res = await queryList({ parentId: id })
    shelfList.value = res.data
}

/** 上架时间点击事件 */
const datePicker = () => {
    pickerShow.value = true
}
const formatDate = (date) => `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
/** 日期选择 */
const onConfirm = (values) => {
    const [start, end] = values;
    pickerShow.value = false
    startTime.value = formatDate(start)
    endTime.value = formatDate(end)
}
/** 日期回显 */
const computPlace = (item: string, index: number) => {
    if (index == 0) {
        if (startTime.value) {
            return startTime.value
        } else {
            return item
        }
    } else if (index == 1) {
        if (endTime.value) {
            return endTime.value
        } else {
            return item
        }
    }
}
/** 重置 */
const reset = () => {
    shelfIndex.value = undefined
    recruiterIndex.value = undefined
    startTime.value = undefined
    endTime.value = undefined
    breakingPriceIndex.value = undefined
    recruiterList.value = []
    calendarRef.value?.reset();
    queryParams.value = {
        pageNum: 1,
        pageSize: 10,
        content: undefined,
        groundTimeSort: '2',
    }
}
/** 完成 */
const submit = () => {
    // 招商部
    if (shelfIndex.value !== undefined && shelfIndex.value !== null && shelfIndex.value !== '') {
        queryParams.value.recruiterDeptId = shelfList.value[shelfIndex.value].deptId
    } else {
        queryParams.value.recruiterDeptId = undefined
    }
    // 招商员
    if (recruiterIndex.value !== undefined && recruiterIndex.value !== null && recruiterIndex.value !== '') {
        queryParams.value.recruiterId = recruiterList.value[recruiterIndex.value].userId
    } else {
        queryParams.value.recruiterId = undefined
    }
    // 是否破价
    if (breakingPriceIndex.value !== undefined && breakingPriceIndex.value !== null && breakingPriceIndex.value !== '') {
        queryParams.value.discountPrice = breakingPrice.value[breakingPriceIndex.value] == '可破价' ? '能' : '否'
    } else {
        queryParams.value.discountPrice = undefined
    }
    // 日期
    queryParams.value.groundStartTime = startTime.value
    queryParams.value.groundEndTime = endTime.value
    showTop.value = false
    onRefresh();
}
/** 筛选点击事件 */
const screenClick = (index: number) => {
    if (index == 0) {
        if (queryParams.value.groundTimeSort == '2') {
            queryParams.value.groundTimeSort = '1'
        } else {
            queryParams.value.groundTimeSort = '2'
        }
    }
    onRefresh();
}
/** 筛选上升点击事件 */
const computScreen = (index: number) => {
    if (index == 0) {
        if (queryParams.value.groundTimeSort == '2') {
            return heiseshangsanjiao
        } else if ((queryParams.value.groundTimeSort == '1')) {
            return huiseshangsanjiao
        } else {
            return huiseshangsanjiao
        }
    }
}
/** 筛选下降点击事件 */
const computScreens = (index: number) => {
    if (index == 0) {
        if (queryParams.value.groundTimeSort == '2') {
            return huisexiasanjiao
        } else if (queryParams.value.groundTimeSort == '1') {
            return heisexiasanjiao
        } else {
            return huisexiasanjiao
        }
    }
}
/** 回退 */
const handleLeft = () => {
    router.push('/operation/operatepage')
}
/** uniapp端回传扫码数据 */
(window as any).msgFromUniapp = async (arg) => {
    const arr = arg.productId.split(',')
    if (arg.name == 'investmentSelection') {
        loading.value = true
        const { rows = [] } = await getSelectionList({ ...queryParams.value, deptIds: shelvesCode.value, type: 0, floor: title.value.includes('一') ? 1 : title.value.includes('二') ? 2 : title.value.includes('三') ? 3 : title.value.includes('四') ? 4 : title.value.includes('五') ? 5 : title.value.includes('六') ? 6 : title.value.includes('七') ? 7 : title.value.includes('八') ? 8 : title.value.includes('九') ? 9 : title.value.includes('十') ? 10 : title.value.includes('十一') ? 11 : title.value.includes('十二') ? 12 : title.value.includes('十三') ? 13 : 0, productsId: arr[0] });
        loading.value = false
        if (rows.length) {
            router.push({
                path: `/operationBasicsDetail/${rows[0].id}`,
                query: {
                    type: 'investmentSelection',
                    // 货架id
                    shelvesCode: shelvesCode.value.join(','),
                    shoppingStatus: rows[0].shoppingStatus,
                    title: title.value
                }
            })
        } else {
            showToast('当前商品无法选品');
        }
    }
}

/** 扫描楼层码 */
const saomaClick = async () => {
    (window as any).uni.webView.postMessage({
        data: {
            type: "scanCode",
            name: "investmentSelection"
        },
    })
}
/** 查询商品列表 */
const getList = async () => {
    const res = await getSelectionList({ ...queryParams.value, deptIds: shelvesCode.value, type: 0, floor: title.value.includes('一') ? 1 : title.value.includes('二') ? 2 : title.value.includes('三') ? 3 : title.value.includes('四') ? 4 : title.value.includes('五') ? 5 : title.value.includes('六') ? 6 : title.value.includes('七') ? 7 : title.value.includes('八') ? 8 : title.value.includes('九') ? 9 : title.value.includes('十') ? 10 : title.value.includes('十一') ? 11 : title.value.includes('十二') ? 12 : title.value.includes('十三') ? 13 : 0 });
    res.rows.forEach(element => {
        if (element.productImage) {
            element.productImage = getEnvValue("VITE_APP_PIC_URL") + element.productImage.split(',')[0]
        }
    });

    refreFlag.value = true
    // 空数据 停止加载
    if (res.rows.length == 0) {
        warehouseList.value = [];
        finished.value = true;
        return;
    }
    // 有数据 赋值列表 加载状态结束
    res.rows.forEach((item) => {
        finished.value = false;
        warehouseList.value.push(item);
    });
    loading.value = false;
    refreshing.value = false;
    // 如果list长度大于等于总数据条数，数据全部加载完成
    if (warehouseList.value.length >= res.total) {
        finished.value = true; //结束加载
    }
};
/** 加载更多 */
const onLoad = async () => {
    if (!title.value) {
        await GetFloor()
    }
    await getList();
    queryParams.value.pageNum++;
};
/** 下拉 */
const onRefresh = async () => {
    if (refreFlag.value) {
        refreFlag.value = false
        finished.value = false; // 清空列表数据
        refreshing.value = false;
        loading.value = true; // 加载状态
        queryParams.value.pageNum = 1; // 分页数赋值为1
        warehouseList.value = []; // 清空数组
        onLoad(); // 重新加载数据
    } else {
        finished.value = false;
        refreshing.value = false;
    }
};
/** 购物车详情 */
const cartClick = () => {
    router.push({
        path: '/shoppingCart',
        query: {
            url: 'investmentSelection',
            shelvesCode: shelvesCode.value.join(','),
            title: title.value,
            type: 0
        }
    })
}
// 查询楼层信息
const GetFloor = async () => {
    const { data = {} } = await getFloor({ deptIdList: shelvesCode.value.join(','), putStockType: '0' })
    title.value = data?.floor
    cartNumber.value = data?.careNum
    getanchor(data.deptId)
}
onMounted(() => {
    let arr = route?.query?.shelvesCode ? (route?.query?.shelvesCode as any).split(',') : ['1856249008068685825', '1858768568445497346']
    shelvesCode.value = arr
})
</script>
<style lang="less" scoped>
.header {
    background: linear-gradient(#CDECFF 0%, #FFFFFF 70%);
    filter: blur(0px);
    height: 90px;
    padding-top: 44px;
    box-sizing: border-box;

    :deep(.van-icon-arrow-left) {
        color: #1a1b1c !important;
    }

    :deep(.van-nav-bar) {
        background: none !important;
    }

    :deep(.van-nav-bar__content) {
        background-color: transparent !important;
    }
}

.investmentSelection {
    height: 100vh;
    width: 100%;
    background: #F6FAFF;
    box-sizing: border-box;
    overflow: hidden;

    .menu_cion {
        width: 19px;
        height: 18px;
    }

    .product_list_serch-text {
        display: flex;
        align-items: center;
        width: 100%;
        background: #f6faff;
        height: 34px;
        margin-bottom: 10px;
        padding-top: 10px;
        position: relative;

        :deep(.van-search__field) {
            background-color: #fff;
            border-radius: 20px;
            padding-left: 10px;
        }

        .product_list_serch1 {
            display: flex;
            align-items: center;
            background: #f6faff;
            width: 85%;
            height: 34px;
            position: relative;

            :deep(.van-search__content) {
                height: 35px;
                padding-left: 0 !important;
            }

            :deep(.van-search__field) {
                height: 35px;
            }
        }

        .product_list_serch2 {
            display: flex;
            width: 50px;
            left: -10px;
            justify-content: center;
            align-items: center;

            .product_list-btn {
                width: 54px;
                height: 26px;
                font-size: 14px;
                color: #ffffff;
                border: none;
                background: #0094ff;
                white-space: nowrap;
                position: absolute;
                top: 14px;
                left: 66%;
            }

            .product_list-btn-screen {
                display: flex;
                // margin-left: 15px;
                //   width: 0px;
                // margin-right: 15px;
                display: flex;
                align-items: center;
                //   border: solid 1px black;
            }

            .product_list-btn-screen-image {
                width: 13px;
                height: 15px;
                background-image: url("@/assets/home/icon_shaixuan.png");
                background-size: 100% 100%;
                //   background-size: 100% 100%;
            }

            .product_list-btn-screen-text {
                display: flex;
                align-items: center;
                height: 18px;
                font-size: 14px;
                color: #1a1b1c;
                margin-left: 5px;
            }
        }
    }

    .mongolian_layer {
        width: 100%;
        height: calc(100vh - 144px);
        position: absolute;
        background: rgba(0, 0, 0, .73);
        z-index: 6000;

        .mongolian_layer_options {
            width: 100%;
            height: 50%;
            background: #FFFFFF;
            display: flex;
            flex-flow: column;
            padding: 15px;
            box-sizing: border-box;

            .mongolian_layer_options_box {
                flex: 1;
                min-height: 0;
                overflow-y: auto;

                .anthor_type {
                    height: auto !important;
                    flex-wrap: wrap;

                    .anthor_type_div {
                        width: calc(100% / 3) !important;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }

                    .shelf_div {
                        margin-bottom: 10px;
                        width: 108px !important;
                    }

                    .shelf_div_avtive {
                        margin-bottom: 10px;
                        width: 108px !important;
                    }


                }

                .anthor_types {
                    justify-content: flex-start !important;
                }

                .shelf_type {
                    width: 100%;
                    height: 30px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-top: 20px;
                    margin-bottom: 20px;

                    .shelf_div {
                        width: 78px;
                        height: 30px;
                        border-radius: 15px;
                        border: 1px solid #B8BECA;
                        font-weight: 400;
                        font-size: 14px;
                        color: #B8BECA;
                        text-align: center;
                        line-height: 30px;
                        box-sizing: border-box;
                    }

                    .shelf_div_avtive {
                        width: 78px;
                        height: 30px;
                        border-radius: 15px;
                        background: #0094FF;
                        font-weight: 400;
                        font-size: 14px;
                        color: #fff;
                        text-align: center;
                        line-height: 30px;
                    }
                }

                .date_shelf {
                    width: 100%;
                    height: 34px;
                    display: flex;
                    position: relative;
                    justify-content: space-between;
                    align-items: center;
                    margin-top: 20px;
                    margin-bottom: 20px;

                    .date_shelf_div {
                        width: 159px;
                        height: 34px;
                        border-radius: 17px;
                        border: 1px solid #B8BECA;
                        position: relative;
                        text-align: center;
                        line-height: 34px;

                        .menu_cions {
                            position: absolute;
                            width: 14px;
                            height: 14px;
                            top: 10px;
                            left: 15px;
                        }

                        .title {
                            font-weight: 400;
                            font-size: 14px;
                            color: #B8BECA;
                        }
                    }

                    .div {
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%, -50%);
                    }
                }
            }

            .buttons {
                width: 100%;
                height: 44px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 20px;

                .reset {
                    width: 162px;
                    height: 44px;
                    border-radius: 23px;
                    border: 1px solid #0094FF;
                    text-align: center;
                    line-height: 44px;
                    font-weight: 400;
                    font-size: 14px;
                    color: #0094FF;
                }

                .submit {
                    width: 162px;
                    height: 44px;
                    border-radius: 23px;
                    background: #0094FF;
                    text-align: center;
                    line-height: 44px;
                    font-weight: 400;
                    font-size: 14px;
                    color: #fff;
                }
            }
        }
    }

    :deep(.van-slider) {
        width: 90%;
    }

    :deep(.van-slider__button) {
        background-color: #0094FF !important;
    }

    .screen {
        display: flex;
        align-items: center;
        justify-content: space-around;
        box-sizing: border-box;
        height: 44px;
        width: 100%;
        line-height: 44px;
        background-color: #fff;
        padding: 0 20px;

        .screen_div {
            display: flex;
            align-items: center;
            display: flex;
            justify-content: center;

            .screen_icons {
                width: 10px;
                height: 6px;
                margin-left: 5px;
            }

            .screen_child {
                font-weight: 400;
                font-size: 14px;
                color: #1A1B1C;
            }

            .screen_icon {
                display: flex;
                flex-wrap: wrap;
                width: 10px;
                height: 16px;
                margin-left: 5px;

                .screen_icons {
                    width: 10px;
                    height: 6px;
                }
            }
        }
    }

    :deep(.van-pull-refresh) {
        height: calc(100vh - 188px);
        overflow: scroll;
        background-color: #fff;
    }

    .nothing_div {
        width: 100%;
        margin: auto;
        text-align: center;
        padding-top: 20vh;
        font-weight: 400;
        font-size: 12px;
        color: #B8BECA;
        line-height: 12px;
        flex-wrap: wrap;

        .van-image {
            width: 160px;
            height: 160px;
        }
    }

    .cart {
        width: 70px;
        height: 70px;
        position: fixed;
        bottom: 20px;
        right: 50px;
        z-index: 1000;

        .numbers {
            position: relative;
            bottom: 70px;
            z-index: 1000;
            left: 50px;

            height: 15px;
            min-width: 15px;
            width: 15px;
            border-radius: 8px 8px 8px 0;
            background-color: #fc2540;
            color: #ffffff;
            font-size: 11px;
            text-align: center;
            padding: 2px;
        }
    }

    .playAnimation {
        animation: cartScale 0.5s ease-in-out;
    }

    //实现购物车弹簧动画
    @keyframes cartScale {
        0% {
            transform: scale(1);
        }

        20% {
            transform: scale(1.2);
        }

        60% {
            transform: scale(0.8);
        }

        80% {
            transform: scale(1.1);
        }

        100% {
            transform: scale(1);
        }
    }


    .ball {
        position: fixed;
        width: 30px;
        height: 30px;
        // background-color: #ff0000;
        top: 0px;
        left: 0px;
        z-index: 1000;

        .van-image {
            animation: 1s ballScale ease-in-out;
            border-radius: 50%;
        }

        @keyframes ballScale {
            0% {
                transform: scale(1);
            }

            30% {
                transform: scale(0.8);
            }

            60% {
                transform: scale(0.6);
            }

            90% {
                transform: scale(0.4);
            }

            100% {
                transform: scale(0.2);
            }
        }
    }

}
</style>